<template>
  <div class="drawer_box">
    <div class="flex_bw_center" style="transform: translate(-1px, 1px)">
      <!-- <div style="    display: flex;">
              <el-select
              v-model="selectValue"
              placeholder="监区"
              style="width: 200px;"
            >
              <el-option
                v-for="item in optionsS"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-button
              title="查询"
              class="filter-item"
              style="margin-left: 10px"
              type="primary"
              :icon="Search"
              @click="getCriminalInfoSelect"
            >
            </el-button>
          </div> -->
    </div>
    <div class="flex_start_start">
      <div style="width: 10%; margin-right: 10px" class="btn_box">
        <div
          @click="btnClick(item, index)"
          :class="{ isAtv: isIndex == index }"
          class="itemz flex_center_center"
          v-for="(item, index) in jqArrCv"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div style="width: 90%" class="isTable">
        <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClickTab">
          <el-tab-pane label="指挥中心" name="zhzx"></el-tab-pane>
          <el-tab-pane label="监区" name="jq"></el-tab-pane>
        </el-tabs> -->
        <el-table
          :data="list"
          border
          fit
          highlight-current-row
          height="680"
          stripe
          style="width: 90%"
        >
          <el-table-column type="index" align="center" width="60" label="序号">
          </el-table-column>
          <el-table-column label="值班日期" align="center">
            <template #default="scope">
              <span>{{ scope.row.date }}</span>
            </template>
          </el-table-column>

          <el-table-column
            v-show="classList.length"
            v-for="(item, index) in classList"
            :key="index"
            :label="getLabel(item)"
            align="center"
          >
            <el-table-column
              show-overflow-tooltip
              :label="it.name"
              align="center"
              v-for="it in item.children"
              :key="it.id"
            >
              <template #default="scope">
                <div>
                  {{ textData(scope.row, it.id) }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/api";
import {
  Search,
  Share,
  Upload,
  TakeawayBox,
  Refresh,
  Collection,
  Plus,
  Loading,
  FolderDelete,
  Back,
} from "@element-plus/icons-vue";

import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
  onUnmounted,
} from "vue";
import { defineProps, defineEmits } from "vue";
const activeName = ref("zhzx");
const props = defineProps({
  isText: {
    type: String,
    default: "",
  },
  orgIds: {
    type: Object,
    default: {},
  },
  jqArr: {
    type: Array,
    default: [],
  },
});
let CriminalInfoSelectList = ref([]);
let searchName = ref("");
const selectValue = ref("");

let dateSfm = ref("");
let hour = ref("");
let daydata = ref("");
let datePicker = ref("");
let isType = ref("");
let years = ref('')
let months = ref('')
// 获取年月日 时
const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;
  years.value = `${year}`;
  months.value = `${month}`;

  return `${year}-${month}-${day} ${hour.value}`;
};
let listData = ref([]);
let classList = ref([]);
let list = ref([]);
let pids = ref(0);
const getList = async () => {
  let dateArr = [years.value, months.value];
  let dateObj = new Date(dateArr[0], dateArr[1], 0);
  let MonthNum = dateObj.getDate();
  let res = await http.znjw.ZdbSelect({
    type: isType.value,
    zbType: "1",
    orgId: selectValue.value || "",
    shift: pids.value,
    account: "",
    date: years.value+'-'+months.value,
  });
  listData.value = res.data;
  if (res && res.code == 0) {
    list.value = [];
    for (let i = 1; i <= MonthNum; i++) {
      let obj = {
        date: dealTime(`${dateArr[0]}-${dateArr[1]}-${ String(i).length<2?'0'+i:i }`),
        type: isType.value,
        zbType: 1,
        shift: 0,
        shiftArr: [],
      };
      //日期匹配数据
      let newArr = res.data.filter((item) => dealTime(item.date) == obj.date);

      if (newArr.length) {
        //多个班次数据合并
        let newsToOne = {
          date: dealTime(newArr[0].date),
          type: isType.value,
          zbType: 1,
          shift: newArr[0].shift,
          shiftArr: [],
        };
        newArr.forEach((ele) => {
          let item = {
            zhz: ele.zhz,
            zbry: ele.zbry,
            zbz: ele.zbz,
            shift: ele.shift,
            zbryAccount: ele.zbryAccount,
            zhzAccount: ele.zhzAccount,
            zbzAccount: ele.zbzAccount,
          };
          newsToOne.shiftArr.push(item);
        });
        list.value[i - 1] = newsToOne;
      } else {
        list.value[i - 1] = obj;
      }
    }
  }
};

const getLabel = (row) => {
  let str = "";
  str = row.name + " " + row.start + "-" + row.end;

  return str;
};
const getShiftSelect = async () => {
  let resz = await http.znjw.ShiftSelect({
    type: isType.value,
    pId: 0,
    orgId: selectValue.value || "",
    startDate: "",
    endDate: "",
    isLock: 0,
    zbType: "1",
  });
  if (resz.code == 0) {
    if (resz && resz.data[0]?.children.length) {
      classList.value = resz.data[0].children;
      pids.value = resz.data[0].id;
    } else {
      classList.value = [];
    }
    getList();
  }
};

const dealTime = (date, format) => {
  if (date) {
    return date.split("T")[0];
    // return format
    //   ? new Date(date).Format(format)
    //   : new Date(date).Format("yyyy-MM-dd");
  }
};
const textData = (row, Ltid) => {
  let str = "";
  listData.value.forEach((item) => {
    if (item.shift == Ltid) {
        console.log('进入了',row.date,item.date);
        
      if (row.date == item.date.split("T")[0]) str = item.zbry;
    } else {
      return false;
    }
  });
  return str;
};

let jqArrCv = ref([]);
let isIndex = ref(0);
const btnClick = (item, index) => {
  selectValue.value = item.id;
  isIndex.value = index;
  getShiftSelect();
};

const handleClickTab = (tab) => {
  isType.value = tab.props.name;
  getShiftSelect();
};
watch(
  () => props.isText,
  (newValue, oldValue) => {
    if (newValue) {
      getFormattedDateTime();
      datePicker.value = daydata.value;
      if (props.isText) {
        jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr));
        let arr = [];
     
        if (props.isText == "jq") {
          arr = jqArrCv.value.filter((item) => item.name.includes("监区"));
        }else{
          arr = jqArrCv.value.filter((item) => item.name.includes("指挥中心"));

        }
         isType.value = props.isText

        jqArrCv.value = arr;
        let allJq = jqArrCv.value.map((itz) => itz.id);
        selectValue.value = allJq[0];
      }

      getShiftSelect();
    } else {
    }
  },
  {
    deep: true, // 深度监听
    immediate: true, // 立即触发回调
  }
);
</script>

<style scoped lang="scss">
/**
 标签样式修改
 */
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid rgb(5, 112, 146) !important;
}
::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid rgba(48, 104, 121, 0) !important;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  color: white;
  border-left: 1px solid rgb(5, 112, 146) !important;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: rgb(0, 247, 255) !important;
  color: rgb(0, 247, 255);
}
.isAtv {
  background-color: rgb(4 110 250 / 27%) !important;
  font-weight: bold;
}
::v-deep .isTable .el-table {
  background-color: rgb(8, 32, 78) !important;
  .el-table tr {
    background-color: rgb(8, 32, 78) !important;
  }
  .cell {
    height: 30px;
    color: #fff;
    text-align: center;
    // border: 1px solid #ccc;
    background: rgb(8, 32, 78) !important;
    font-size: 12px;
    line-height: 30px;
  }
  .el-table__cell {
    border-color: 1px solid rgb(5, 112, 146);
    padding: 2px 0px !important;
    background: rgb(8, 32, 78) !important;
  }
  .el-table--fit .el-table__inner-wrapper:before {
    display: none !important;
  }
  .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }
  --el-table-border-color: rgb(5, 112, 146);
}
.drawer_box {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
  .drawer_text {
    position: absolute;
    top: -23px;
    left: 2px;
    font-size: 18px;
  }
}
</style>
